<template>
  <el-table
    :data="tableData"
    width="500"
    style="width: 500px"
    border
    :span-method="objectSpanMethod"
  >
    <el-table-column prop="class" width="200" label="班级"></el-table-column>
    <el-table-column prop="gender" width="70" label="性别"></el-table-column>
    <el-table-column prop="name" width="150" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      backendData: [
        {
          id: 1,
          class: "一年级一班",
          genderList: [
            {
              id: 1,
              gender: "男",
              studentList: [
                { name: "张三", age: 7 },
                { name: "李四", age: 7 },
              ],
            },
            {
              id: 2,
              gender: "女",
              studentList: [
                { name: "王五", age: 6 },
                { name: "赵六", age: 8 },
              ],
            },
          ],
        },
        {
          id: 2,
          class: "一年级一班",
          genderList: [
            {
              id: 3,
              gender: "男",
              studentList: [
                { name: "张三", age: 7 },
                { name: "李四", age: 7 },
              ],
            },
            {
              id: 4,
              gender: "女",
              studentList: [
                { name: "王五", age: 6 },
                { name: "赵六", age: 8 },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.tableData = this.transformData(this.backendData);
  },
  methods: {
    transformData(data) {
      let newData = [];
      for (const classData of data) {
        for (const genderData of classData.genderList) {
          for (const student of genderData.studentList) {
            newData.push({
              id: classData.id,
              class: classData.class,
              genderId: genderData.id,
              gender: genderData.gender,
              name: student.name,
              age: student.age,
            });
          }
        }
      }
      return newData;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(column);
      // 仅在处理特定列时进行合并操作，这里假设是第一列，即班级列
      if (columnIndex === 0) {
        // 获取当前单元格的id值
        const currentValue = row.id;
        // 获取上一行相同列的id值
        const preRow = this.tableData[rowIndex - 1];
        const preValue = preRow ? preRow.id : null;

        // 如果当前id和上一行的id相同，则不合并，显示当前行
        if (currentValue === preValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          // 计算当前单元格应该跨越多少行
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            const nextRow = this.tableData[i];
            if (nextRow.id === currentValue) {
              rowspan++;
            } else {
              break;
            }
          }
          // 返回合并的行数和列数，这里colspan保持为1，因为我们只在一列上进行合并
          return { rowspan, colspan: 1 };
        }
      }

      if (columnIndex === 1) {
        // 获取当前单元格的id值
        const currentValue = row.genderId;
        // 获取上一行相同列的id值
        const preRow = this.tableData[rowIndex - 1];
        const preValue = preRow ? preRow.genderId : null;

        // 如果当前id和上一行的id相同，则不合并，显示当前行
        if (currentValue === preValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          // 计算当前单元格应该跨越多少行
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            const nextRow = this.tableData[i];
            if (nextRow.genderId === currentValue) {
              rowspan++;
            } else {
              break;
            }
          }
          // 返回合并的行数和列数，这里colspan保持为1，因为我们只在一列上进行合并
          return { rowspan, colspan: 1 };
        }
      }

      // 如果不是第一列，则不进行合并
      return { rowspan: 1, colspan: 1 };
    },
  },
};
</script>
